<template>
    <view>
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :show-empty-view-reload-when-error="false"
            :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
            empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-error-text="暂无数据"
            bg-color="#F9FAFC"
            v-model="dataList"
            @query="queryList"
        >
            <view>
                <view class="topBox">
                    <view class="flex_wrap row_between topDetail">
                        <view class="flex_wrap">
                            <u-avatar
                                size="168rpx"
                                :src="
                                    userInfoDetail.avatar
                                        ? userInfoDetail.avatar
                                        : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png'
                                "
                            />
                            <view class="infoDetail">
                                <u--text
                                    :text="userInfoDetail.salesmanName"
                                    color="#fff"
                                    size="46rpx"
                                    bold
                                />
                                <u--text
                                    @click="copeMobile()"
                                    suffixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/21/b5a1d87a96254549810a185f5720fcd6.png"
                                    iconStyle="font-size: 32rpx;margin-left:16rpx"
                                    color="#fff"
                                    size="28rpx"
                                    :text="`电话：${userInfoDetail.mobile}`"
                                    margin="12rpx 0"
                                />
                                <u--text
                                    @click="copeWechat()"
                                    suffixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/21/b5a1d87a96254549810a185f5720fcd6.png"
                                    iconStyle="font-size: 32rpx;margin-left:16rpx"
                                    color="#fff"
                                    size="28rpx"
                                    :text="`微信：${
                                        userInfoDetail.wechatNumber ||
                                        '暂未设置'
                                    }`"
                                />
                            </view>
                        </view>
                        <view>
                            <u-icon
                                name="/static/images/sph.png"
                                size="48rpx"
                                label="视频号"
                                labelSize="28rpx"
                                space="8rpx"
                                labelColor="#fff"
                                @click="sphBtn()"
                            ></u-icon>
                            <!-- <view
                                ><button
                                    open-type="share"
                                    style="
                                        background: transparent;
                                        margin-top: 40rpx;
                                        float: right;
                                    "
                                >
                                    <u-icon
                                        name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/02/04/54756e192d3640c3858d17a5391a1f8f.png"
                                        size="40rpx"
                                    /></button
                            ></view> -->
                        </view>
                    </view>
                    <view class="content">
                        <view class="resumeClass" v-if="userInfoDetail.resume">
                            <!-- {{userInfoDetail.resume}} -->
                            <text class="my_text" space="ensp">{{
                                userInfoDetail.resume
                            }}</text>
                        </view>
                        <view v-for="em in addressList" style="display: flex">
                            <u-icon
                                color="#1682FF"
                                size="40rpx"
                                name="map-fill"
                            ></u-icon>
                            <view class="addrBox" @click="goMap(em)">
                                {{ em.address }}（{{ em.name }}）</view
                            >
                            <!-- <view class="addrBox">
								<u--text :prefixIcon="
                					    userInfo.sex
                					        ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/07/d823dbc4004048e88f816d6b988a7d9b.png'
                					        : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/07/d80a0515bc9e40e2a6fc8e5df6f9719d.png'
                					" iconStyle="font-size: 28rpx;margin-right:10rpx" text="--岁" color="#777"
									size="24rpx"></u--text>
							</view> -->
                        </view>
                    </view>
                </view>
            </view>

            <view class="cellBox">
                <u-sticky v-if="showTap">
                    <view class="tabs">
                        <u-tabs
                            :list="navList"
                            @change="changeType"
                            @click="changeType"
                            :current="currentTab"
                            :scrollable="false"
                            :inactiveStyle="inactiveStyle"
                            :activeStyle="activeStyle"
                            lineColor="#1682FF"
                        ></u-tabs>
                    </view>
                </u-sticky>
                <!-- 列表 -->
                <view
                    style="padding: 0 32rpx"
                    v-if="navList[currentTab]['name'] === '资讯'"
                >
                    <view class="news">
                        <view
                            class="news_list"
                            v-for="(item, index) in dataList"
                            :key="index"
                            :data-index="index"
                            @touchstart="drawStart"
                            @touchmove="drawMove"
                            @touchend="drawEnd"
                            :style="'right:' + item.right + 'px'"
                        >
                            <view
                                class="news_detail flex_wrap row_between"
                                @click="editData(item.id, 2)"
                            >
                                <u-image
                                    height="136rpx"
                                    width="240rpx"
                                    :src="item.videoCover"
                                    mode="aspectFill"
                                    radius="8rpx"
                                />
                                <view style="flex: 1; padding-left: 12rpx">
                                    <text class="detail_t">{{
                                        item.videoIntro
                                    }}</text>

                                    <u-text
                                        :text="
                                            $u.timeFormat(
                                                item.createTime,
                                                'yyyy年mm月dd日'
                                            )
                                        "
                                        size="24rpx"
                                        color="#666"
                                        margin="26rpx 0 0 0"
                                    />
                                </view>
                            </view>
                            <view class="remove" @click="delData(item.id)"
                                >删 除</view
                            >
                            <view class="edit" @click="editData(item.id, 1)"
                                >编 辑</view
                            >
                        </view>
                    </view></view
                >
                <view
                    v-if="navList[currentTab]['name'] === '视频'"
                    class="videos flex_wrap row_between"
                >
                    <view
                        class="videos_list"
                        v-for="(item, index) in dataList"
                        :key="index"
                        @click="itemClick(item.id)"
                    >
                        <view class="videos_detail">
                            <image
                                :src="item.videoCover"
                                class="videos-img"
                                mode="aspectFit"
                            ></image>
                            <view class="videos-t flex_wrap">
                                <text>{{ item.videoIntro }}</text>
                            </view>
                            <view
                                class="videos-tt flex_wrap row_between row_middle"
                            >
                                <view class="flex_wrap">
                                    <u-avatar
                                        size="32rpx"
                                        :src="item.salesmanAvatar"
                                    />
                                    <u--text
                                        :text="item.salesmanName"
                                        color="#666"
                                        size="20rpx"
                                        margin="0 8rpx"
                                    />
                                </view>
                                <u-icon
                                    name="/static/images/myUser.png"
                                    size="24rpx"
                                    :label="item.likeNum"
                                    labelSize="24rpx"
                                    space="8rpx"
                                    labelColor="#3D3D3D"
                                    @click="addVideo()"
                                ></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="shareBtn" v-if="navList.length">
                <u-icon
                    name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/22/0583b4871264408bb0259b03e0a01166.png"
                    size="140rpx"
                    @click="shareBtn()"
                ></u-icon>
            </view>
            <u-popup
                :show="show"
                :round="10"
                mode="bottom"
                @close="close"
                closeable
            >
                <view class="sharePopup">
                    <u-text
                        text="发布"
                        size="36rpx"
                        color="#3D3D3D"
                        align="center"
                        bold
                    />
                    <view class="flex_wrap row_around">
                        <u-icon
                            v-if="navList[currentTab]['name'] === '资讯'"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/22/9f7988424b07479c9242350a14e3be39.png"
                            size="120rpx"
                            label="发布资讯"
                            labelPos="bottom"
                            labelSize="32rpx"
                            space="24rpx"
                            labelColor="#3D3D3D"
                            @click="to_upload()"
                        ></u-icon>
                        <u-icon
                            v-if="navList[currentTab]['name'] === '视频'"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/22/3456b0a628d74535b58a284b778d6e95.png"
                            size="120rpx"
                            label="发布视频"
                            labelPos="bottom"
                            labelSize="32rpx"
                            space="24rpx"
                            labelColor="#3D3D3D"
                            @click="addVideo()"
                        ></u-icon>
                        <!-- <u-icon
                            v-if="currentTab == 2"
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/02/20/f278f8eb4bb64dddba4e91a838f1d5c9.png"
                            size="120rpx"
                            label="发布相册"
                            labelPos="bottom"
                            labelSize="32rpx"
                            space="24rpx"
                            labelColor="#3D3D3D"
                            @click="addPublish()"
                        ></u-icon> -->
                    </view>
                </view>
            </u-popup>
        </z-paging>
    </view>
</template>

<script>
import {
    getSalesmanByCustomerIdNoToken,
    salesmanVideo,
} from "@/api/consultationSalesman.js";
import { delBlog, pageAgentVideoCustomer } from "@/api/customerAgent.js";
import { mapGetters } from "vuex";
import { baseUrl } from "@/config/tendIdConfig";
import {
    getCustomerByIdNoToken,
    getCustomerInfoByToken,
    getCustomerAddress,
} from "@/api/login.js";
import { getCustomerGoodsList } from "@/api/shop.js";
import caches from "@/config/caches.js";
import { formatDecimal } from "@/utils/index.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
export default {
    data() {
        return {
            show: false,
            navList: [
                {
                    name: "资讯",
                },
                {
                    name: "视频",
                },
            ],
            currentTab: 0,
            inactiveStyle: {
                fontSize: "32rpx",
                backgroundColor: "#fff",
            },
            activeStyle: {
                fontSize: "32rpx",
                fontWeight: "bold",
                color: "#588BF3",
            },
            editBtnStyle: {
                width: "218rpx",
                height: "72rpx",
                borderRadius: "16rpx",
                border: "2rpx solid #1682FF",
                fontSize: "32rpx",
                color: "#1682FF",
            },
            sxBtnStyle: {
                width: "412rpx",
                height: "72rpx",
                borderRadius: "16rpx",
                backgroundColor: "#1682FF",
                fontSize: "32rpx",
                color: "#fff",
            },
            //左滑默认宽度
            delBtnWidth: 120,
            dataList: [],
            userInfoDetail: {},
            customerId: "", //客户ID
            myStyle: [], //个人风采
            addressList: [], //地址
            showTap: false,
            albumWidth: 0,
        };
    },
    computed: {
        ...mapGetters(["showVideo", "userInfo"]),
        goodsSkuListPrice() {
            return (item) => {
                const money = item.price
                    ? formatDecimal(numDiv(item.price, 100))
                    : 0;
                return money;
            };
        },
    },
    onLoad(o) {
        if (o && o.power) {
            this.power = o.power;
            if (!this.power) this.navList = [];
            if (this.power) {
                const list = [];
                if ((this.power & 2) === 2) {
                    list.push({
                        name: "资讯",
                    });
                }

                if ((this.power & 1) === 1) {
                    list.push({
                        name: "视频",
                    });
                }
                this.navList = list;
            }
            this.customerId = o.agentCustomerId;
            console.log("object :>> ", o);
            getCustomerAddress(this.customerId).then((r) => {
                if (r.code === 200) this.addressList = r.data;
            });
            getSalesmanByCustomerIdNoToken(this.customerId).then((res) => {
                if (res.code === 200) {
                    this.userInfoDetail = res.data;
                    this.$refs.paging.reload();
                }
            });
        }
    },
    onShow() {
        let that = this;
        uni.$on("currentTab", function (data) {
            console.log(
                that.navList,
                "监听到事件来自返回的参数：currentTab" + data
            );
            that.currentTab = data;
            that.dataList = [];
            that.close();
            that.$refs.paging.reload();
        });
        this.$nextTick(() => {
            // 解决uview u-tab，下划线异常
            setTimeout(() => {
                that.showTap = true;
                that.currentTab = that.currentTab;
            }, 10);
        });
    },
    onShareAppMessage() {
        const shareData = {
            title: "HI!我向您推荐了一张名片！",
            path:
                "/pages_card/user_card/index?salesmanId=" +
                this.userInfo.id +
                "&customerId=" +
                this.customerId,
        };
        return shareData;
    },
    methods: {
        to_goodsDetail(e) {
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },
        goMap({ latitude, longitude, name }) {
            uni.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                name,
                scale: 28,
            });
        },
        // 相册

        changeList(e) {
            console.log(e);
            this[e.name].push(e.value);
        },
        itemImageClick(item) {
            console.log("object :>> ", item);
            uni.navigateTo({
                url: `/pages_operate/poster/index?image=${item.image}&fileId=${item.id}&customerId=${this.customerId}`,
            });
        },

        sphBtn() {
            uni.showToast({
                title: '该功能暂未开放',
                icon: 'none',
                duration: 2000
            });
        },
        shareBtn() {
            this.show = true;
        },
        close() {
            this.show = false;
        },
        addVideo() {
            uni.$u.route({
                url:
                    "/pages_video/cardVideo/index?releaseManId=" +
                    this.userInfoDetail.id +
                    "&currentTab=" +
                    this.currentTab,
            });
        },
        addPublish() {
            uni.$u.route({
                url:
                    "/pages_consultation/information/photosPublish?customerId=" +
                    this.customerId,
            });
        },
        itemClick(id) {
            uni.navigateTo({
                url: `/pages_video/videoNew/index?clickId=${id}`,
            });
        },
        copeMobile() {
            let data = this.userInfoDetail.mobile;
            uni.setClipboardData({
                data: data,
                success: (res) => {
                    uni.showToast({
                        title: "已复制电话",
                        duration: 2000,
                    });
                },
            });
        },
        copeWechat() {
            let data = this.userInfoDetail.wechatNumber;
            uni.setClipboardData({
                data: data,
                success: (res) => {
                    uni.showToast({
                        title: "已复制微信",
                        duration: 2000,
                    });
                },
            });
        },
        editInfo() {
            uni.$u.route({
                url: "/pages_my/edit_card/index",
            });
        },
        privateLetter() {
            uni.$u.route({
                url: "/pages_my1/privateLetter/index",
            });
        },

        changeType(e) {
            console.log("object :>> ", e);
            this.currentTab = e.index;
            this.$refs.paging.reload();
        },
        async queryList(pageNo, pageSize) {
            if (!this.navList.length) return;
            const that = this;
            if (this.userInfoDetail.id) {
                const params = {
                    pageNum: pageNo,
                    pageSize: pageSize,
                    releaseManId: this.userInfoDetail.id,
                    recordType:
                        that.navList[that.currentTab]["name"] === "资讯"
                            ? 1
                            : 8,
                };
                let result = await pageAgentVideoCustomer(params);
                that.$refs.paging.completeByTotal(
                    result.data.rows,
                    result.total
                );
            }
        },

        //开始触摸滑动
        drawStart(e) {
            // console.log("开始触发");
            var touch = e.touches[0];
            this.startX = touch.clientX;
        },
        //触摸滑动
        drawMove(e) {
            // console.log("滑动");
            for (var index in this.dataList) {
                this.$set(this.dataList[index], "right", 0);
            }
            var touch = e.touches[0];
            var item = this.dataList[e.currentTarget.dataset.index];
            var disX = this.startX - touch.clientX;
            if (disX >= 20) {
                if (disX > this.delBtnWidth) {
                    disX = this.delBtnWidth;
                }
                this.$set(
                    this.dataList[e.currentTarget.dataset.index],
                    "right",
                    disX
                );
            } else {
                this.$set(
                    this.dataList[e.currentTarget.dataset.index],
                    "right",
                    0
                );
            }
        },
        //触摸滑动结束
        drawEnd(e) {
            // console.log("滑动结束", e);
            if (e) {
                var item = this.dataList[e.currentTarget.dataset.index];
                if (item.right >= this.delBtnWidth / 2) {
                    this.$set(
                        this.dataList[e.currentTarget.dataset.index],
                        "right",
                        this.delBtnWidth
                    );
                } else {
                    this.$set(
                        this.dataList[e.currentTarget.dataset.index],
                        "right",
                        0
                    );
                }
            }
        },
        //删除方法
        delData(id) {
            const that = this;
            // console.log("删除");
            uni.showModal({
                title: "提示",
                content: "确认该条资讯？",
                success: function (res) {
                    if (res.confirm) {
                        // console.log("用户点击确定");
                        delBlog(id).then((res) => {
                            console.log(res, "删除");
                            that.$refs.paging.reload();
                        });
                    } else if (res.cancel) {
                        // console.log("用户点击取消");
                    }
                },
            });
        },
        // 新增 个人风采  咨询
        to_upload(o, type) {
            const url = o
                ? "/pages_consultation/information/index?myStyle=1&customerId=" +
                  this.customerId
                : "/pages_consultation/information/index?releaseManId=" +
                  this.userInfoDetail.id +
                  "&currentTab=" +
                  this.currentTab;
            //   运营人的业务员ID
            // 个人风采编辑是否是编辑
            uni.$u.route({
                url: type ? url + "&edit=1&type=1" : url,
            });
        },
        editData(id, type) {
            uni.$u.route({
                url:
                    "/pages_consultation/information/index?releaseManId=" +
                    this.userInfoDetail.id +
                    "&currentTab=" +
                    this.currentTab,
                params: {
                    id: id,
                    type, //编辑需要1 详情2
                },
            });
        },
    },
};
</script>

<style scoped lang="scss">
.resumeClass {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #3d3d3d;
    font-size: 32rpx;
    margin-bottom: 26rpx;
    /* 设置宽度和高度 */
    // width: 200px;
    // height: 40px;
}
.my_text {
    word-break: break-word; //可以避免文字超出限制
}

.topBox {
    width: 100%;
    height: 100%;
    color: #000;
    background: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/12/21/ce8efd9b506546b9822048ad0a250169.png")
        no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

.topDetail {
    padding: 44rpx 40rpx;
}

.infoDetail {
    margin-left: 32rpx;
}

.content {
    border-radius: 40rpx 40rpx 0 0;
    background: #ffffff;
    padding: 32rpx 48rpx;
}

.addrBox {
    color: #1682ff;
    font-size: 24rpx;
    padding: 6rpx 20rpx;
    display: inline-block;
    margin-right: 24rpx;
    text-decoration: underline;
}

.btns {
    margin-top: 34rpx;
}

.tabs {
    background-color: #ffffff;
}

.cellBox {
    // padding: 0 32rpx;
    // box-sizing: border-box;
    position: relative;
}

.news {
    // padding: 0 32rpx;
    height: auto;
    overflow: hidden;
}

.news_list {
    display: flex;
    position: relative;
    flex-direction: row;
    border-bottom: 2rpx solid #d8d8d8;
}

.news_detail {
    padding: 32rpx 0;
}

.detail_t {
    display: block;
    width: 412rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 28rpx;
    color: #3d3d3d;
}

.remove {
    margin-top: 24rpx;
    margin-left: -5%;
    width: 60px;
    height: 136rpx;
    background-color: red;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.edit {
    margin-top: 24rpx;
    width: 60px;
    height: 136rpx;
    background-color: #1682ff;
    color: white;
    position: absolute;
    top: 0;
    right: -120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.shareBtn {
    position: fixed;
    bottom: 240rpx;
    right: 60rpx;
}

.sharePopup {
    padding: 32rpx 0 70rpx;

    view {
        margin-top: 52rpx;
    }
}

.videos {
    padding: 32rpx;
    box-sizing: border-box;
    flex-flow: wrap;
}
.videos_detail {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
}

.videos-img {
    width: 336rpx;
    height: 404rpx;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
}

.videos-t {
    width: 336rpx;
    padding: 12rpx;
    box-sizing: border-box;

    text {
        width: 100%;
        font-size: 28rpx;
        color: #3d3d3d;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
.videos-tt {
    padding: 0 12rpx 18rpx;
}

.save {
    width: 210rpx;
    height: 60rpx;
    background: #588bf3;
    border-radius: 44rpx;
    line-height: 60rpx;
    color: #fff;
    text-align: center;
    font-size: 28rpx;
    position: absolute;
    left: 35%;
    bottom: -110%;
    z-index: 1000;
}
.wrap {
    padding: 30rpx;
}
.album {
    @include flex;
    align-items: flex-start;

    &__avatar {
        background-color: $u-bg-color;
        padding: 5px;
        border-radius: 3px;
    }

    &__content {
        margin-left: 10px;
        flex: 1;
    }
}
// ------商城-----
.item {
    padding: 20rpx 28rpx;
    box-sizing: border-box;
    flex-flow: wrap;
}

.cellBox3 {
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
}

::v-deep .u-cell__body {
    padding: 0 !important;
}

.celldetail {
    width: 100%;
    padding-bottom: 20rpx;
}

.celldetail-img {
    // border-radius: 16rpx;
    width: 336rpx;
    height: 336rpx;
}

.shopping-cart-box {
    // position: absolute;
    // bottom: 14rpx;
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;
    padding-right: 20rpx;
    text-align: right;
    text {
        color: #ff0000;
        font-size: 18rpx;
        font-weight: 400;
    }
}

.celldetail-t {
    padding: 0 10rpx;
    box-sizing: border-box;

    text {
        width: 264rpx;
        font-size: 24rpx;
        color: #000000;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    view {
        margin: 28rpx 0 0 6rpx;
    }
}

.title {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 28rpx 40rpx;
}

.goodListTitle {
    font-weight: 500;
    color: #333333;
    font-size: 32rpx;
    display: inline-block;
}

.chickenImage {
    padding: 0rpx 32rpx 20rpx;
}
</style>
